<template>
  <div>
    <TypeNav/>
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag
            :trademark="searchParams.trademark"
            :prop="searchParams.props"
            @deleteQuery="deleteQuery"
            @deleteParams="deleteParams"
            @deleteTradeMark='deleteTradeMark'
            @deleteAttrs='deleteAttrs'
        />
        <SearchSelector @tradeMarkEvent="tradeMarkEvent" @attrEvent="attrEvent"/>
        <SearchDetail @searchListSort="searchListSort" :pageNo="searchParams.pageNo" @changePageNo="changePageNo"/>
        <SearchHot/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import SearchDetail from "@/pages/Search/components/SearchDetail";
import SearchTag from "@/pages/Search/components/SearchTag";
import SearchSelector from "@/pages/Search/components/SearchSelector";
import SearchHot from "@/pages/Search/components/SearchHot";

export default {
  name: "Search",
  components: {SearchHot, SearchSelector, SearchTag, SearchDetail},
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: "",
      }
    }
  },
  beforeMount() {
    this.initData()
  },
  mounted() {
    this.getSearchList(this.searchParams);
  },
  methods: {
    ...mapActions("search", ["getSearchList"]),
    //  初始化请求参数
    initData() {
      const {categoryName, category1Id = '', category2Id = '', category3Id = ''} = this.$route.query
      const {searchKey = ''} = this.$route.params
      this.searchParams = {
        ...this.searchParams,
        categoryName,
        category1Id,
        category2Id,
        category3Id,
        keyword: searchKey
      }
    },
    //  获取子组件传入的品牌的参数
    tradeMarkEvent(tradeMark) {
      this.searchParams.trademark = `${tradeMark.tmId}:${tradeMark.tmName}`
      this.getSearchList(this.searchParams)
    },
    //  获取子组件传入的商品属性的参数
    attrEvent(attr) {
      const {attrId, attrValue, attrName} = attr
      const str = `${attrId}:${attrValue}:${attrName}`
      if (this.searchParams.props.includes(str)) return
      this.searchParams.props.push(str)
      this.getSearchList(this.searchParams)
    },
    //  删除query
    deleteQuery() {
      this.searchParams = {
        ...this.searchParams,
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
      }
      const params = this.$route.params
      this.$router.push({
        name: 'Search',
        params
      })
    },
    //删除params
    deleteParams() {
      this.searchParams = {
        ...this.searchParams,
        keyword: ""
      }
      const query = this.$route.query
      this.$router.push({
        name: 'Search',
        query
      })
      this.$bus.$emit('notifyParams')
    },
    //删除品牌
    deleteTradeMark() {
      this.searchParams.trademark = ''
      this.getSearchList(this.searchParams)
    },
    //  删除属性
    deleteAttrs(attr) {
      this.searchParams.props = this.searchParams.props.filter(item => item != attr)
      this.getSearchList(this.searchParams)
    },
    //商品排序
    searchListSort(order) {
      this.searchParams.order = order
      this.getSearchList(this.searchParams)
    },
    //  修改页码
    changePageNo(pageNo) {
      this.searchParams.pageNo = pageNo
      this.getSearchList(this.searchParams)
    }
  },
  watch: {
    $route() {
      this.initData()
      this.getSearchList(this.searchParams)
    }
  }
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
